<template>
	<view class="pt10 pb90 pr15 pl15">
		<u-navbar :title="title"></u-navbar>
		<view class="" >
			<view class="pb20">
				<view class="fs16 fw600 mb15">车辆图片</view>
				<u-upload :show-progress="false" @on-success="bannerSucc()" @on-remove="delbanner" :action="action"
					:file-list="banner" width="140" height="140" max-count="36"></u-upload>
			</view>
			<view class="mt10 pos-rel" style="border: 2rpx solid #4CAEEA;">
				<view class=" wd100 fw600 center c-fff"
					style="height: 80rpx;line-height: 80rpx;text-indent: 10rpx;background-color: #00aeff;">
					车辆基本信息
				</view>
				<view class="wd100 fs10 dis-flex fw600 center"
					style="height: 90rpx;line-height: 90rpx;border-bottom: 2rpx solid #4CAEEA;">
					<view class="" style="width: 20%;">
						牌照号码
					</view>
					<view class="" style="border-right: 2rpx solid #4CAEEA;border-left: 2rpx solid #4CAEEA;width: 30%;">
						{{car_num}}
					</view>
					<view class="" style="border-right: 2rpx solid #4CAEEA;width: 20%;">
						品牌型号
					</view>
					<view class=" " style="width: 30%;">
						{{brand}}
					</view>
				</view>
				<view class="wd100 fs10 fw600 center dis-flex flex-align-center"
					style="border-bottom: 2rpx solid #4CAEEA;height: 90rpx;">
					<view class="" style="width: 20%;">
						发动机型号
					</view>
					<view class="  dis-flex flex-align-center"
						style="border-right: 2rpx solid #4CAEEA;border-left: 2rpx solid #4CAEEA;width: 30%;height: 90rpx;">
						<view class=" ellipsis-2" style="width: 200rpx;">
							{{engine}}
						</view>
					</view>
					<view class=""
						style="border-right: 2rpx solid #4CAEEA;width: 20%;height: 90rpx;line-height: 90rpx;">
						VIN码
					</view>
					<view class=" dis-flex flex-align-center" style="width: 30%;height: 90rpx;">
						<view class=" ellipsis-2" style="width: 200rpx;">
							{{vin_number}}
						</view>
					</view>

				</view>
				<view class="wd100 fs10 dis-flex fw600 center" style="height: 90rpx;line-height: 90rpx;">
					<view class="" style="width: 20%;">
						制造日期
					</view>
					<view class=" "
						style="border-right: 2rpx solid #4CAEEA;border-left: 2rpx solid #4CAEEA;width: 30%;">
						{{make_date}}
					</view>
					<view class="" style="border-right: 2rpx solid #4CAEEA;width: 20%;">
						表显里程
					</view>
					<view class=" " style="width: 30%;">
						{{mileage}}公里
					</view>
				</view>
			</view>

			<view class="mt10 pos-rel" style="border: 2rpx solid #4CAEEA;">
				<view class=" wd100 fw600 center c-fff"
					style="height: 80rpx;line-height: 80rpx;text-indent: 10rpx;background-color: #00aeff;">
					鉴定结论
				</view>
				<view class="wd100 fs10 dis-flex fw600 center"
					style="height: 90rpx;line-height: 90rpx;border-bottom: 2rpx solid #4CAEEA;">
					<view class="dis-flex flex-align-center "
						style="width: 18%;line-height: 28rpx;padding-left: 10rpx;padding-right: 10rpx;">
						<view class="" @click="gojcbz(1)">
							<image src="../../static/shigu.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
							是否重大事故车
							<u-icon name="question-circle"></u-icon>
						</view>
					</view>
					<view class=" "
						style="border-right: 2rpx solid #4CAEEA;border-left: 2rpx solid #4CAEEA;width: 15%;">
						{{is_shigu}}
					</view>
					<view class="dis-flex flex-align-center"
						style="border-right: 2rpx solid #4CAEEA;width: 18%;line-height: 28rpx;padding-left: 14rpx;padding-right: 14rpx;">
						<view class="" @click="gojcbz(2)">
							<image src="../../static/shui.png" mode="" style="width: 24rpx;height: 24rpx;"></image>是否水泡车
							<u-icon name="question-circle"></u-icon>
						</view>
					</view>
					<view class=" " style="border-right: 2rpx solid #4CAEEA;width: 15%;">
						{{is_paoshui}}
					</view>
					<view class="dis-flex flex-align-center"
						style="border-right: 2rpx solid #4CAEEA;width: 18%;line-height: 28rpx;padding-left: 14rpx;padding-right: 14rpx;">
						<view class="" @click="gojcbz(3)">
							<image src="../../static/huo.png" mode="" style="width: 24rpx;height: 24rpx;"></image>是否火烧车
							<u-icon name="question-circle"></u-icon>
						</view>
					</view>
					<view class=" " style="width: 15%;">
						{{is_huoshao}}
					</view>
				</view>
				<view class="wd100 fs10 dis-flex fw600 center flex-align-center">
					<view class=" pt10 pb10" style="width: 18%;height: 100%;">
						备注
					</view>
					<view class="	  p15" style="border-left: 2rpx solid #4CAEEA;width: 82%;height: 100%;">
						{{result}}
					</view>
				</view>
			</view>

			<view class="mt10" v-if="list != ''">
				<u-collapse hover-class="none" :item-style="itemStyle">
					<u-collapse-item :title="xuanxiang_title(item1)" v-on:gai="gaiStatus(item1.is_show,item1.id,index1)"
						:show="item1.is_show" v-for="(item1, index1) in list" :key="index1">
						<view class="mb15">
							<view class="bd-dd br5 pl10 pr10 bg-fff mt10" style="" v-for="(item,index) in item1.list"
								:key="index">
								<view class="dis-flex flex-between" style="height: 80rpx;line-height: 80rpx;">
									<view @click.stop="godakai(index1,index,item.is_fault)" class="wd60 ellipsis">{{index+1}}.<text
											class="ml5">{{item.name}}</text></view>
									<view @click.stop="bukejian(index1,index,item.is_fault)" class=" dis-flex flex-end"
										v-if="item.is_fault == 0">
										<text class="mr3" v-if="item1.name == '事故车检测'">未见事故痕迹</text>
										<text class="mr3" v-else-if="item1.name == '水泡车检测'">未见泡水痕迹</text>
										<text class="mr3" v-else-if="item1.name == '火烧车检测'">未见火烧痕迹</text>
										<text class="mr3" v-else>未见异常</text>
										
										<u-icon name="checkmark-circle-fill" color="#2CB144" size="44"></u-icon>
									</view>
									<view @click.stop="bukejian(index1,index,item.is_fault)" class=" dis-flex flex-end"
										v-if="item.is_fault == 1">
										<text class="mr3">异常</text>
										<u-icon name="info-circle-fill" color="#eb0000" size="44"></u-icon>
									</view>
									<view @click.stop="bukejian(index1,index,item.is_fault)" class=" dis-flex flex-end"
										v-if="item.is_fault == 2"><text class="mr3">受限不可检</text>
										<u-icon name="info-circle-fill" color="#FFCD42" size="44"></u-icon>
									</view>
								</view>
								<view class="mt10 mb10 pl15 pr15" v-if="item.show && item.is_fault != 2">
									<view v-for="(it,index2) in item.abnormal" :key="index2"
										class="dis-flex flex-align-center flex-between mb10" style="height: 70rpx;">
										<view class="wd90">{{it.name}}</view>
										<view class="wd10 dis-flex flex-end"
											@click.stop="gaiyichuang(1,index1,index,index2)"
											v-if="it.is_fault == 1">
											<u-icon name="checkmark-circle-fill" color="#eb0000" size="44"></u-icon>
										</view>
										<view class="wd10 dis-flex flex-end"
											@click.stop="gaiyichuang(0,index1,index,index2)" v-else>
											<u-icon name="checkmark-circle-fill" color="#f1f1f1" size="44"></u-icon>
										</view>
									</view>
									<view class="mt20" v-if="item.is_fault == 1">
										<u-upload :show-progress="false" @on-success="imgsucc()" @on-remove="delimg"
											:action="action" :file-list="item.fault_imgs" width="140" height="140"
											max-count="3"></u-upload>
									</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>

			<view class="btn-submit-box">
				<view v-if="order_status == 0" @click="queding()" class=" center c-fff  br5 btn-submit"
					style="background: #1d336f;">
					提交
				</view>
				<view v-if="order_status == 1" class=" center c-fff  br5 btn-submit"
					style="background: #1d336f;opacity: .6;">
					审核中
				</view>
				<view v-if="order_status == 3" @click="queding()" class=" center c-fff  br5 btn-submit"
					style="background: #1d336f;">
					审核拒绝，请检查内容再提交
				</view>
			</view>
		</view>
		
		<u-popup v-model="popupShow" mode="center"  border-radius="14" width="60%" z-index="99999999999" :closeable="true" >
			<view class="p20 ">
				<view class="center fs16">{{popupTitle}}</view>
				<view class="mt15 c-666" style="word-wrap: break-word;">{{popupContent}}</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupShow:false,
				popupTitle:'',
				popupContent:'',
				oid: '',
				action: this.$config.hosts + this.$config.UrlPostgetfile, //图片上传地址
				list: [],
				checkid: '',
				car_num: "", //牌照号码
				brand: "", //车辆型号
				engine: "", //发动机型号
				vin_number: "", //VIN码
				make_date: "", //制造年月
				mileage: "", //表里里程
				name: "", //车辆所有人
				phone: "", //联系电话
				use_model: "", //使用性质
				is_shigu: "", //是否为事故车
				is_paoshui: "", //是否泡水车
				is_huoshao: "", //是否火烧车
				result: "", //鉴定结论
				itemStyle: {
					borderBottom: '2rpx solid #d1d1d1',
					height: 'auto'
				},
				title: '',
				banner: [],
				order_status: 0,
				data: [],

			}
		},
		onLoad(e) {
			uni.showLoading({
				title: '加载中'
			});
			this.oid = e.oid
			this.init()
			this.jiben()
			uni.showShareMenu()
			uni.showLoading({
				title: '加载中'
			});
		},
		methods: {
			jiben() {
				var json = {
					oid: this.oid
				}
				this.$http.post(this.$config.UrlPostreportInfo, json).then((res) => {
					if (res.status == 1 && res.data) {
						this.car_num = res.data.car_num //牌照号码
						this.brand = res.data.brand //车辆型号
						this.engine = res.data.engine //发动机型号
						this.vin_number = res.data.vin_number //VIN码
						this.make_date = res.data.make_date //制造年月
						this.mileage = res.data.mileage //表里里程
						this.name = res.data.name //车辆所有人
						this.phone = res.data.phone //联系电话
						this.use_model = res.data.use_model //使用性质
						this.is_shigu = res.data.is_shigu //是否为事故车
						this.is_paoshui = res.data.is_paoshui //是否泡水车
						this.is_huoshao = res.data.is_huoshao //是否火烧车
						this.result = res.data.result //鉴定结论
						this.title = res.data.service_name
						this.data = res.data
						this.order_status = res.data.status
						var list = res.data.banner
						var arr = []
						if (list) {
							for (let i = 0; i < list.length; i++) {
								var listimgs = {
									url: ''
								}
								listimgs.url = list[i]
								arr.push(listimgs)
							}
						}

						this.banner = arr
					}
				})
			},
			init() {
				var json = {
					oid: this.oid,
					checkid: this.checkid
				}
				this.$http.post(this.$config.UrlPostcheckList, json).then((res) => {
					if (res.status == 1) {
						var list = res.data
						for (let i = 0; i < list.length; i++) {
							for (let j = 0; j < list[i].list.length; j++) {
								var arr = []
								if (list[i].list[j].fault_imgs) {
									var imgs = list[i].list[j].fault_imgs
									for (let k = 0; k < imgs.length; k++) {
										var listimgs = {
											url: ''
										}
										listimgs.url = imgs[k]
										arr.push(listimgs)
									}
								}
								list[i].list[j].fault_imgs = arr
							}

						}
						this.list = list
						uni.hideLoading();
					}
				})
			},
			godakai(index1, index,is_fault) {
				if(is_fault != 2){
					this.checkid = this.list[index1].list[index].id
					this.list[index1].list[index].show = !this.list[index1].list[index].show
				}
				
				// var list = this.list[index1].list
				// for (let i = 0; i < list.length; i++) {
				// 	if(i != index){
				// 		this.list[index1].list[i].show = false
				// 	}
				// }
			},
			gaiyichuang(type, index1, index, index2) {
				this.checkid = this.list[index1].list[index].id
				if (type == 1) {
					this.list[index1].list[index].abnormal[index2].is_fault = 0
				} else {
					this.list[index1].list[index].abnormal[index2].is_fault = 1
				}
				var arr = []
				for (let i = 0; i < this.list[index1].list[index].abnormal.length; i++) {
					arr.push(this.list[index1].list[index].abnormal[i].is_fault)
				}
				if (arr.indexOf(1) != -1) {
					this.list[index1].list[index].is_fault = 1
				} else {
					this.list[index1].list[index].is_fault = 0
				}
				//切换异常
				var json = {
					oid: this.oid,
					checkid: this.checkid,
					abnormal_id: this.list[index1].list[index].abnormal[index2].id,
					is_fault: type == 0 ? 1 : 0
				}
				this.$http.post(this.$config.UrlPosttjyichang, json).then((res) => {
					if (res.status == 1) {
						// this.init()
					}
				})
			},
			imgsucc(e) {
				//图片上传成功

				if (e.status == 1) {
					var json = {
						oid: this.oid,
						checkid: this.checkid,
						imgpath: e.data,
					}
					this.$http.post(this.$config.UrlPostuploadImg, json).then((res) => {
						if (res.status == 1) {}
					})
				}

			},
			bannerSucc(e) {
				//banner图片上传成功
				if (e.status == 1) {
					var json = {
						oid: this.oid,
						imgpath: e.data,
					}
					this.$http.post(this.$config.UrlPostuploadBanner, json).then((res) => {
						if (res.status == 1) {}
					})
				}
			},
			delimg(e) {
				//删除图片
				var json = {
					oid: this.oid,
					checkid: this.checkid,
					key: e,
				}
				this.$http.post(this.$config.UrlPostdeleteImg, json).then((res) => {
					if (res.status == 1) {
						this.init()
					}
				})
			},
			delbanner(e) {
				//删除banner图片
				var json = {
					oid: this.oid,
					key: e,
				}
				this.$http.post(this.$config.UrlPostdeleteBanner, json).then((res) => {
					if (res.status == 1) {
						this.init()
					}
				})
			},
			xuanxiang_title(item) {
				return item.name + "-" + item.z_abnormal_num + '项' + "--异常" + item.yc_abnormal_num + '项';
			},
			queding() {
				var json = {
					oid: this.oid,
				}
				this.$http.post(this.$config.UrlPostsubmit, json).then((res) => {
					if (res.status == 1) {
						this.$api.toast('提交成功')
						setTimeout(() => {
							this.$api.openWindow("/pages/yuan_order/yuan_order")
						}, 500)
					}
				})
			},
			gaiStatus(status, id, index1) {


				if (this.list[index1].is_show == 0) {
					this.list[index1].is_show = 1
				} else {
					this.list[index1].is_show = 0
				}

				var json = {
					oid: this.oid,
					cid: id,
					status: status,
				}
				this.$http.post(this.$config.UrlPostswitch, json).then((res) => {
					if (res.status == 1) {}
				})
			},
			bukejian(index1, index, is_fault) {
				if (is_fault == 0) {
					this.list[index1].list[index].is_fault = 2
					var json = {
						oid: this.oid,
						cid: this.list[index1].list[index].id,
						status: 1,
					}
					// this.$http.post(this.$config.UrlPostdisable, json).then((res) => {
					// 	if (res.status == 1) {}
					// })
				}
				if (is_fault == 2) {
					
					this.list[index1].list[index].is_fault = 0
					var json = {
						oid: this.oid,
						cid: this.list[index1].list[index].id,
						status: 0,
					}
					// this.$http.post(this.$config.UrlPostdisable, json).then((res) => {
					// 	if (res.status == 1) {}
					// })
				}

			},
			gojcbz(type) {
				this.popupShow = !this.popupShow
				if(type == 1){
					this.popupTitle = '事故车检测标准'
					this.popupContent = this.data.shigu
				}else if(type == 2){
					this.popupTitle = '水泡车检测标准'
					this.popupContent = this.data.shuipao
				}else{
					this.popupTitle = '火烧车检测标准'
					this.popupContent = this.data.huoshao
				}
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
		color: #333333;
	}

	.none {
		display: none;
	}
</style>
